<template>
	<div class="app-container">
		<div class="content">
			<el-radio-group size="small" v-model="week">
				<el-radio-button label="上周"></el-radio-button>
				<el-radio-button label="本周"></el-radio-button>
				<el-radio-button label="下周"></el-radio-button>
			</el-radio-group>
			<el-table :data="tableData" v-loading="loading" size="mini" style="margin-top: 20px;">
				<el-table-column align="center" prop="name" :show-overflow-tooltip="true" label="体检套餐名称" width="200px" fixed="left"></el-table-column>
				<el-table-column align="center" v-for="(item, index) in currentWeek" :label="item">
					<el-table-column align="center" label="上午">
						<template slot-scope="scope">
							<template v-if="scope.row.interval[index].morning.source > 0 && scope.row.interval[index].morning.residualSource > 0">
								<span style="color: #F46363;">{{ scope.row.interval[index].morning.residualSource }}</span>
								<span>/{{ scope.row.interval[index].morning.source }}</span>
							</template>
							<template v-if="scope.row.interval[index].morning.source==0">
								<span class="intervalRest">休</span>
							</template>
						</template>
					</el-table-column>
					<el-table-column align="center" label="下午">
						<template slot-scope="scope">
							<template v-if="scope.row.interval[index].afternoon.source > 0 && scope.row.interval[index].afternoon.residualSource > 0">
								<span style="color: #F46363;">{{ scope.row.interval[index].afternoon.residualSource }}</span>
								<span>/{{ scope.row.interval[index].afternoon.source }}</span>
							</template>
							<template v-if="scope.row.interval[index].afternoon.source==0">
								<span class="intervalRest">休</span>
							</template>
						</template>
					</el-table-column>
				</el-table-column>
				<el-table-column align="center" label="操作" fixed="right">
					<template slot-scope="scope">
						<el-button type="text" icon="el-icon-s-tools"></el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
import dayjs from 'dayjs'
import { getSchedule } from '@/api/hospital/physicalInterval'

export default {
	data() {
		return {
			week: '本周',
			currentWeek: [],
			tableData: [],
			loading: false
		};
	},
	mounted() {
		/*let dow = dayjs().get('day');
		let lastWeek = dayjs().subtract(dow - 1, 'days').format('YYYY-MM-DD')
		for (let i = 0; i < 7; i++) {
			if (i == 0) {
				this.currentWeek.push(lastWeek)
			} else {
				this.currentWeek.push(dayjs(lastWeek).subtract(i - i * 2, 'days').format('YYYY-MM-DD'))
			}
		}*/
		this.getSchedule();
	},
	methods: {
		getSchedule() {
			this.loading = true;
			getSchedule().then(res => {
				for (const key in res.data) {
					let physicalName = key.split(',')[1];
					let obj = { name: physicalName, interval: this.getInterval(res.data[key]) };
					this.tableData.push(obj);
				}
			});
		},
		getInterval(data) {
			let weekLength = this.currentWeek.length;
			let array = [];
			for (const dataKey in data) {
				if(weekLength === 0) {
					this.currentWeek.push(dataKey);
				}
				let interval = data[dataKey];
				let obj = {};
				for (let i = 0; i < interval.length; i++) {
					if(interval[i].interval == 0) {
						obj.morning = {
							residualSource: interval[i].residualSource,
							source: interval[i].source
						}
					} else {
						obj.afternoon = {
							residualSource: interval[i].residualSource,
							source: interval[i].source
						}
					}
				}
				array.push(obj)
			}
			return array;
		}
	},
	watch: {
		tableData: function() {
			this.$nextTick(function(){
				let intervals = document.querySelectorAll(".intervalRest");
				for (let i = 0; i < intervals.length; i++) {
					intervals[i].parentNode.parentNode.style.backgroundColor = "#fafafa";
				}
				this.loading = false;
			});
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-radio-button__inner {
	width: 80px;
}

::v-deep .el-table th > .cell {
	font-size: 10px;
}

.bgTable{}
</style>
